<template>
  <div class="make-chart-container">
    <div class="chart-container">
      <div class="chart-box" :class="[type]" id="chartBox">
        <component
          :is="getComponent()"
          :type="type"
          :title="title"
          :subtitle="subtitle"
          :describe="describe"
          :data="data"
          :config="config"
          :dataType="dataSourceType"
          @element-click="elementClick"
          ref="chart"
        />
      </div>
    </div>
    <div class="chart-config-container">
      <config ref="config"
        :type="type"
        :title="title"
        :subtitle="subtitle"
        :describe="describe"
        :data="data"
        :config="config"
        @data-change="dataChange"
        :dataType="dataSourceType"
        @config-change="configChange"
        @input-change="inputChange"
        @cell-selection="cellSelection"
      />
      <div class="ft-btn-box">
        <a-button
          type="primary"
          size="large"
          block
          @click="id ? modify() : preservation()"
          :loading="nextLoading"
        >
          <template #icon><CheckOutlined /></template>
          完成配置，保存图表
        </a-button>
      </div>
    </div>
  </div>
</template>
<script>
  import { defineComponent } from 'vue';
  import { CheckOutlined } from '@ant-design/icons-vue';

  import config from '@/components/showConfig/charts/index.vue';
  import bar from '@/components/showModule/charts/bar.vue';
  import line from '@/components/showModule/charts/line.vue';
  import pie from '@/components/showModule/charts/pie.vue';
  import funnel from '@/components/showModule/charts/funnel.vue';
  import radar from '@/components/showModule/charts/radar.vue';
  import gauge from '@/components/showModule/charts/gauge.vue';
  import column from '@/components/showModule/charts/column.vue';
  import liquid from '@/components/showModule/charts/liquid.vue';
  import wordCloud from '@/components/showModule/charts/wordCloud.vue';
  import dualAxes from '@/components/showModule/charts/dualAxes.vue';
  import area from '@/components/showModule/charts/area.vue';
  import trendNumber from '@/components/showModule/charts/numberTrend.vue';
  import number from '@/components/showModule/number/single.vue';
  import multipleNumber from '@/components/showModule/number/multiple.vue';
  import carousel from '@/components/showModule/image/carousel.vue';

  import io from '@/utils/http/index.js';
  import { message } from 'ant-design-vue';

  export default defineComponent({
    components: { config, CheckOutlined },
    props: {
      showData: {
        type: Object,
      },
    },
    data() {
      return {
        id: null,
        type: 'line',
        title: '',
        subtitle: '',
        describe: '',
        data: null,
        config: null,
        apiConfig: null,
        dataSourceType: 0,

        nextLoading: false,
      };
    },

    created() {
      this.init();
    },

    methods: {
      init() {
        const showData = this.showData;
        if (showData) {
          this.id = showData.id;
          this.type = showData.type;
          this.title = showData.title;
          this.subtitle = showData.subtitle;
          this.describe = showData.describe;
          this.data = showData.data;
          this.config = showData.config;
          this.apiConfig = showData.apiConfig;
          this.dataSourceType = showData.dataSourceType;
        }
      },
      getComponent() {
        let map = {
          line: line,
          stepLine: line,
          bar: bar,
          groupBar: bar,
          stackBar: bar,
          pie: pie,
          ring: pie,
          funnel: funnel,
          radar: radar,
          gauge: gauge,
          column: column,
          groupColumn: column,
          stackColumn: column,
          liquid: liquid,
          wordCloud: wordCloud,
          dualAxes: dualAxes,
          area: area,
          stackArea: area,
          number: number,
          trendNumber: trendNumber,
          multipleNumber: multipleNumber,
          carousel: carousel,
        };
        return this.type ? map[this.type] : map['line'];
      },

      // 数据改变
      dataChange(data) {
        let chart = this.$refs.chart;
        chart.$changeData && chart.$changeData();
      },

      // 配置数据改变
      configChange(config) {
        this.config = config;
        let chart = this.$refs.chart;
        chart.$changeData && chart.$updateConfig(config);
      },

      inputChange(input) {
        this.title = input.title;
        this.subtitle = input.subtitle;
        this.describe = input.describe;
      },

      getRequest() {
        return {
          type: this.type,
          title: this.title,
          subtitle: this.subtitle,
          describe: this.describe,
          data: JSON.stringify(this.data),
          config: JSON.stringify(this.config),
          dataSourceType: this.dataSourceType,
          apiConfig: JSON.stringify(this.apiConfig),
        };
      },

      // 保存
      preservation() {
        this.nextLoading = true;
        io({
          url: '/show/api/module',
          method: 'post',
          data: this.getRequest(),
        })
          .then((res) => {
            message.success('保存成功');
            this.id = res.data._id;
            this.nextLoading = false;
            this.$router.replace({ path: '/make/' + res.data._id, query: this.$route.query });
          })
          .catch((e) => {
            message.error(e.msg);
            this.nextLoading = false;
          });
      },

      // 修改
      modify() {
        this.nextLoading = true;
        io({
          url: '/show/api/module/' + this.id,
          method: 'put',
          data: this.getRequest(),
        })
          .then((res) => {
            message.success('修改成功');
            this.nextLoading = false;
          })
          .catch((e) => {
            message.error(e.msg);
            this.nextLoading = false;
          });
      },

      // 图表单击
      elementClick (v) {
        this.$refs.config.$refs.configData.$selectCell(v.data)
      },

      // 表格选中
      cellSelection (v) {
        this.$refs.chart.$select && this.$refs.chart.$select(v)
      }
    },
  });
</script>

<style lang="scss">
  .make-chart-container {
    height: 100%;
    .chart-container {
      height: 100%;
      padding-right: 450px;
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;
      .chart-box {
        width: 500px;
        height: 400px;
        background-color: #fff;
        position: absolute;
        &.multipleNumber {
          width: 820px;
          height: 180px;
        }
        &.trendNumber {
          height: 280px;
        }
        &.number {
          width: 280px;
          height: 140px;
        }
      }
    }
    .chart-config-container {
      position: fixed;
      right: 0;
      top: 56px;
      bottom: 0;
      width: 450px;
      background: #fff;
      padding: 10px;
      .ft-btn-box {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
      }
    }
  }
</style>
